home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap12 / dun12_7.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  2.9 KB  |  112 lines
  1. <HTML>
  2.  
  3. <HEAD>
  4.  
  5. <TITLE>Dynamic image map</TITLE>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8.  
  9. var L=new layerTool();
  10.  
  11. function layerTool()
  12.  
  13.     {
  14.  
  15.     if (navigator.appName=="Netscape")
  16.  
  17.         this.layerProp=navProp;
  18.  
  19.     else
  20.  
  21.         this.layerProp=exProp;
  22.  
  23.     }
  24.  
  25. function exProp()
  26.  
  27.     {
  28.  
  29.     return document.all[arguments[arguments.length-1]].style;
  30.  
  31.     }
  32.  
  33. function navProp()
  34.  
  35.     {
  36.  
  37.     retVal="";
  38.  
  39.     for (x=0;x<arguments.length;x++)
  40.  
  41.         {
  42.  
  43.         retVal+="document.layers[\'"+arguments[x]+"\']";
  44.  
  45.         if (x!=arguments.length-1)
  46.  
  47.             retVal+=".";
  48.  
  49.         }
  50.  
  51.     return eval(retVal);
  52.  
  53.     }
  54.  
  55.  
  56.  
  57. p=new Array();
  58.  
  59. p[0]=new Area(25,30,125,75,"http://www.corrosive.co.uk/");
  60.  
  61. p[1]=new Area(5,125,130,175,"http://www.corrosive.co.uk/");
  62.  
  63. p[2]=new Area(115,100,225,126,"http://www.corrosive.co.uk/");
  64.  
  65.  
  66.  
  67. var cyc=0;
  68.  
  69. m=new map("m","container","topLayer",p);
  70.  
  71. function Area(X1,Y1,X2,Y2,url)
  72.  
  73.     {
  74.  
  75.     this.left=X1;
  76.  
  77.     this.top=Y1;
  78.  
  79.     this.right=X2;
  80.  
  81.     this.bottom=Y2;
  82.  
  83.     this.url=url;
  84.  
  85.     }
  86.  
  87. function map(name,container,top,areas)
  88.  
  89.     {
  90.  
  91.     this.name=name;
  92.  
  93.     this.top=top;
  94.  
  95.     this.container=container;
  96.  
  97.     this.areas=areas;
  98.  
  99.     this.writeMap=writeMap;
  100.  
  101.     this. highlight=highlight;
  102.  
  103.     this.reset=reset;
  104.  
  105.     this.timeout=null;
  106.  
  107.     }
  108.  
  109. function writeMap (mapName)
  110.  
  111.     {
  112.  
  113.     document.write("<map name="+mapName+">");
  114.  
  115.     for (x=0;x<this.areas.length;x++)
  116.  
  117.         {
  118.  
  119.         document.write("<area shape=\"RECT\" href='"+this.areas[x].url+"' 
  120. onMouseOver='"+this.name+".highlight("+x+")' ");
  121.  
  122.         document.write("onMouseOut='"+this.name+".reset()' ");
  123.  
  124.         document.write("COORDS=\""+this.areas[x].left+","+this.areas[x].top+" 
  125. "+this.areas[x].right+","+this.areas[x].bottom+"\">");
  126.  
  127.         }
  128.  
  129.     document.write("</map>");
  130.  
  131.     }
  132.  
  133. function highlight(num)
  134.  
  135.     {
  136.  
  137.     clearTimeout(this.timeout);
  138.  
  139.     this.timeout=setTimeout(this.name+".reset()",5000);
  140.  
  141.     L.layerProp(this.container,this.top).visibility="visible";
  142.  
  143.     L.layerProp(this.container,this.top).clip.top=this.areas[num].top;
  144.  
  145.     L.layerProp(this.container,this.top).clip.left=this.areas[num].left;
  146.  
  147.     L.layerProp(this.container,this.top).clip.bottom=this.areas[num].bottom;
  148.  
  149.     L.layerProp(this.container,this.top).clip.right=this.areas[num].right;
  150.  
  151.     }
  152.  
  153. function reset()
  154.  
  155.     {
  156.  
  157.     L.layerProp(this.container,this.top).visibility="hidden";
  158.  
  159.     }
  160.  
  161. </SCRIPT>
  162.  
  163. <STYLE TYPE="text/css">
  164.  
  165. .maps{
  166.  
  167.     POSITION:absolute
  168.  
  169.     }
  170.  
  171. #container{
  172.  
  173.     POSITION:relative
  174.  
  175.     }
  176.  
  177. #topLayer{
  178.  
  179.     VISIBILITY:hidden
  180.  
  181.     }
  182.  
  183. </STYLE>
  184.  
  185. <SCRIPT>
  186.  
  187.     m.writeMap("myMap");
  188.  
  189. </SCRIPT>
  190.  
  191.  
  192.  
  193. </HEAD>
  194.  
  195. <BODY BGCOLOR="#FFFFFF">
  196.  
  197.  
  198.  
  199. <DIV ID="container">
  200.  
  201.     <DIV ID="bottomLayer" CLASS="maps">
  202.  
  203.     <IMG SRC="res/apple1.gif" USEMAP="#myMap" BORDER=0>
  204.  
  205.     </DIV>
  206.  
  207.     <DIV ID="topLayer" CLASS="maps">
  208.  
  209.     <IMG NAME=TEST SRC="res/apple2.gif" USEMAP="#myMap" BORDER=0>
  210.  
  211.     </DIV>
  212.  
  213. </DIV>
  214.  
  215.  
  216.  
  217. </BODY>
  218.  
  219. </HTML>
  220.  
  221.